<!--
 * @Descripttion: 
 * @version: 1.0.0
 * @Author: Wupy
 * @Date: 2022-12-21 16:20:13
 * @LastEditors: Wupy
 * @LastEditTime: 2023-02-18 14:50:24
-->
<template>
    <var-bottom-navigation v-model:active="active" :fixed="true" @change="handleChange(active)" :safe-area="true">
      <var-bottom-navigation-item label="工作台" icon="format-list-checkbox" name="teachHome"/>
      <var-bottom-navigation-item label="通讯录" icon="card-account-details-outline" name="teachContact"/>
      <var-bottom-navigation-item label="信息" icon="message-processing-outline" name="teachMessage"/>
      <var-bottom-navigation-item label="我的" icon="account-circle" name="teachPersonal"/>
    </var-bottom-navigation>
  </template>
<script setup lang='ts'>
import { ref } from 'vue'
import { useRouter, type RouteLocationRaw } from 'vue-router';

const active = ref('teachHome')//初始化导航栏
const router = useRouter()
// 点击导航栏的事件函数，参数是当前导航栏的name属性
function handleChange (active: number|string|RouteLocationRaw){
 router.push(active as RouteLocationRaw)//路由跳转
}
</script>

<style>

</style>